<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"   href="/static/layui/css/layui.css" />
</head>
<body>
<img id="userImg" style="width:210px;height:210px;" onerror="javascript:this.src='/static/img/upload.png';"  src=""/><br><br>
<button id="submitBtn" class="layui-btn" style="width: 200px">确认</button>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['upload','layer','jquery'],function(){
		var upload = layui.upload;
		var layer = layui.layer;
		var $ = layui.jquery;
		//初始化文件上传组件
        //创建一个上传组件
        upload.render({
            elem: '#userImg' //选择变成文件上传组件的容器
            ,url: '/user/user.do?service=updateImg'   // 后端请求路径
            ,accept : 'images' // 支持上传的文件类型
            ,acceptMime:'image/*' // 设置可以选择文件类型
            , auto: false  // 设置不自动提交
            ,bindAction: '#submitBtn'  // 设置提交按钮
            ,size: 1024*10
            ,field: "userImg"  // 在传递字符串时 ，key-value  对应key
            ,choose: function(obj){  // 选择完文件后 执行
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result) {
                    // console.log(index); //得到文件索引
                    // console.log(file); //得到文件对象
                    // console.log(result); //得到文件base64编码，比如图片
                //将上传的图片进行回显，显示在img中
                    $("#userImg").attr("src",result);
                })
            }
            ,done: function(res, index, upload){
                // res  json对象
                //假设code=0代表上传成功
                if(res.code == 200){
                    //do something （比如将res返回的图片链接保存到表单的隐藏域）
                    layer.msg(res.msg);
                    setTimeout(function () { // 1000毫秒之后执行里面方法内容
                        window.parent.location.href = "/user/userPage.do"  // 上传成功，返回到主页
                    },1000)
                }
                    layer.msg(res.code)
            }
            ,error: function(index, upload){
                //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                layer.msg("上传失败！")
            }
        })

	});
</script>
</body>
</html>